<pro-header></pro-header>
<nz-card>
    <form nz-form [formGroup]="vedioForm">


        <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSpan]="6">
                <label for="title" nz-form-item>标题</label>
            </div>
            <div nz-col [nzSpan]="12" id="title">
                <nz-input formControlName="title"></nz-input>
            </div>
        </div>

        <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSpan]="6">
                <label for="watchnum" nz-form-item>观看数</label>
            </div>
            <div nz-col [nzSpan]="12" id="watchnum">
                <nz-input formControlName="watchnum"></nz-input>
            </div>
        </div>
        <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSpan]="6">
                <label for="type" nz-form-item>分类</label>
            </div>
            <div nz-col [nzSpan]="12" id="type">
                <nz-select nzsele formControlName="vedioType">
                    <nz-option *ngFor="let item of vedioTag" [nzLabel]="item['title']"
                               [nzValue]="item['id']"></nz-option>
                </nz-select>
            </div>
        </div>
        <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSpan]="6">
                <label for="img" nz-form-item>封面图</label>
            </div>
            <div nz-col [nzSpan]="12" id="img">
                <nz-upload class="avatar-uploader"
                           [nzAction]="uploadUrl"
                           nzName="file"
                           [nzShowUploadList]="false"
                           (nzChange)="handleChange($event)">
                    <i *ngIf="!avatarUrl" class="anticon anticon-plus avatar-uploader-trigger"></i>
                    <img *ngIf="avatarUrl" [src]="avatarUrl" class="avatar">
                </nz-upload>
            </div>


        </div>
        <div nz-form-item nz-row>

            <div nz-form-label nz-col [nzSpan]="6">
                <label for="veido" nz-form-item>视频</label>
            </div>

            <div nz-col [nzSpan]="12" id="veido">
                <!--<nz-input formControlName="title"></nz-input>-->
                <button nz-button [nzType]="'primary'" (click)="showModal()">
                    <span>编辑</span>
                </button>
            </div>

        </div>


        <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSpan]="6">
                <label for="title" nz-form-item>内容</label>
            </div>
            <div nz-col [nzSpan]="12" id="content">
                <nz-input [nzType]="'textarea'" formControlName="content"></nz-input>
            </div>
        </div>

        <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSpan]="6">
                <!--<label for="title" nz-form-item>操作</label>-->
            </div>
            <div nz-col [nzSpan]="12">
               <button nz-button [nzType]="'primary'" (click)="save()">保存</button>
            </div>
        </div>
    </form>


</nz-card>

<nz-modal [nzVisible]="isVisible" [nzTitle]="'视频编辑'" [nzContent]="modalContent" (nzOnCancel)="handleCancel($event)"
          (nzOnOk)="handleOk($event)">
    <ng-template #modalContent>


        <div nz-row class="top">
            <span>   选择方式:</span>
            <nz-radio-group [(ngModel)]="vedioUploadType">
                <label nz-radio [nzValue]="0">
                    <span>远程连接</span>
                </label>

                <nz-upload
                    nzName="file"
                    (nzChange)="vedioChange($event)"
                    [nzAction]="uploadUrl">
                    <label nz-radio [nzValue]="1">
                        <span>本地文件</span>
                    </label>
                </nz-upload>
            </nz-radio-group>
        </div>


        <div nz-row class="top">
            <nz-input [(ngModel)]="avaterVedio" [nzPlaceHolder]="'视屏地址'"></nz-input>
        </div>
    </ng-template>
</nz-modal>
